<!DOCTYPE html>
<html>
<head>
    <title>BasicMouseInterfaceTest</title>

    <style>
      div.solidborder { border-style:solid; border-width:1px; margin: 10px;}
      #draggable { width: 60px; height: 60px; padding: 0.5em; margin: 10px; }
      #droppable { width: 75px; height: 75px; padding: 0.5em; margin: 10px; }
    </style>

    <link type="text/css" href="https://selenium.dev/selenium/web/css/ui-lightness/jquery-ui-1.12.1.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="https://selenium.dev/selenium/web/js/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        $('#mouse-tracker').mousemove(function(e){
          xPos = e.pageX - this.offsetLeft;
          yPos = e.pageY - this.offsetTop;
          $('#relative-location').html(xPos + ', ' + yPos);
          });
        })

</script>
    <script type="text/javascript">
    function clickStatus(message) {
      document.getElementById('click-status').innerHTML = message;
    }
    function moveStatus(message) {
      document.getElementById('move-status').innerHTML = message;
    }
    function dropStatus(message) {
        document.getElementById('drop-status').innerHTML = message;
    }
    function relativeStatus(message) {
        document.getElementById('relative-location').innerHTML = message;
    }
    function absoluteStatus(message) {
        document.getElementById('absolute-location').innerHTML = message;
    }
    function tellPos(p){
        document.getElementById('absolute-location').innerHTML = p.pageX + ', ' + p.pageY;
    }
    function clearAbsolute(p){
        document.getElementById('absolute-location').innerHTML = '';
    }
    addEventListener('mousemove', tellPos, false);
    document.documentElement.addEventListener('mouseleave', clearAbsolute, false);
  </script>
    <script type="text/javascript">
    $(function () {
      $("#draggable").draggable();
      $("#droppable").droppable({
        drop: function (event, ui) { dropStatus("dropped") }
      });
    });
  </script>

</head>
<body>

<div id="draggable" class="ui-widget-content ui-draggable ui-draggable-handle"
     style="position: relative; left: -6px; top: -7px;">Draggable
</div>
<div id="droppable" class="ui-widget-header ui-droppable">Droppable</div>
</body>

</html>